<template>
  <div>
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card class="box-card">
  <el-row :gutter="20">
      <el-col :span="8"> <el-input placeholder="请输入内容"  v-model="queryInfo.query"  clearable @clear="getUserList">
    <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
    </el-input></el-col>
      <el-col :span="1" ><el-button type="primary" @click="dialogVisible=true">添加用户</el-button></el-col>
  </el-row>
  <el-table
    :data="userlist"
    border
    stripe
    style="width: 100%">
    <el-table-column type="index" label="#"></el-table-column>
     <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="角色" prop="role_name"></el-table-column>
        <el-table-column label="状态">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
            </template>
        </el-table-column>
        <el-table-column width="180px" label="操作">
           <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delUser(scope.row.id)"></el-button>
            <!-- 分配角色按钮 -->
            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
  </el-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size.sync="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
  <el-dialog
  title="添加用户"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <!-- 内容主体区域 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input show-password v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="resetForm('addFormRef')">重置</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  title="修改用户信息"
  :visible.sync="EditdialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="30%">
   <el-form-item label="用户名">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="resetFrom('editFormRef')">重置</el-button>
    <el-button type="primary" @click="updateUser">确 定</el-button>
  </span>
</el-dialog>

<el-dialog title="分配角色" :visible.sync="dialogRoleVisible" @close="setRoleDialogClosed">
  <div>
  <p>当前用户：{{this.userInfo.username}}</p>
  <p>当前角色：{{this.userInfo.role_name}}</p>
  <p>分配新角色：<el-select v-model="selectedRoleId" placeholder="请选择角色">
    <el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
    </el-select></p></div>
  
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogRoleVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
  </div>
</el-dialog>

  </div>
</template>

<script>
import request from '../../api/index'
export default {
    name:'Users',
    data(){
      const checkMobile=(rule,value,cb)=>{
      let  reg=/^(13[0-9]|15[0-9]|17[678]|18[0-9]|14[57])[0-9]{8}$/
        if(reg.test(value)){
          cb()
        }
        else{
          cb(new Error("手机号码格式不正确！"))
        }
      }
       var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }

      cb(new Error('请输入合法的邮箱'))
    }

         // 获取用户列表的参数对象
    return { queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize:1
      },
      userlist: [],
      total: 0,
      dialogVisible: false,
       // 添加用户的表单数据
      addForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      addFormRules:{ 
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '用户名的长度在3~10个字符之间',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '用户名的长度在6~15个字符之间',
            trigger: 'blur'
          }
        ],
        email:[{require:true,message:'请输入邮箱号',trigger:'blur'},
                            {validator:checkEmail,trigger:'blur'}],
        mobile:[{require:true,message:'请输入手机号',trigger:'blur'},
                            {validator:checkMobile,trigger:'blur'}]},
         EditdialogVisible:false,
         editForm:{
           id:'',
           username:'',
           email:'',
           mobile:'',

         },
         editFormRules:{
        email:[{require:true,message:'请输入邮箱号',trigger:'blur'},
                            {validator:checkEmail,trigger:'blur'}],
        mobile:[{require:true,message:'请输入手机号',trigger:'blur'},
                            {validator:checkMobile,trigger:'blur'}]},
         rolesList:[],
         userInfo:{},
         selectedRoleId:'',
         dialogRoleVisible:false
         }
        },
  
   created() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      const { data: res } = await request({url:'/users',method:'get',params:this.queryInfo})
      if (res.meta.status !== 200) {
        return this.$message.error('获取用户列表失败！')
      }
      this.userlist = res.data.users
      this.total = res.data.total
    },
     handleSizeChange(val) {
         this.queryInfo.pagesize=val;
         this.getUserList();
      },
      handleCurrentChange(val) {
          this.queryInfo.pagenum=val;
          this.getUserList();
      },
      async userStateChanged(row){
          const {data:res}=await request({method:'put',url:`/users/${row.id}/state/${row.mg_state}`})
          if(res.meta.status!==200){
              row.mg_state=!row.mg_state
              this.$message.error('修改状态失败')
          }
          else
            this.$message.success("修改状态成功！")
      },
       resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      addUser(){
        this.$refs.addFormRef.validate(async valid=>{
          if (!valid){
            return
          }
          const {data:res}=await request({url:'/users',method:'post',data:this.addForm})
          if (res.meta.status !== 201) {
          this.$message.error('添加用户失败！')
        }

        this.$message.success('添加用户成功！')
        // 隐藏添加用户的对话框
        this.DialogVisible = false
        // 重新获取用户列表数据
        this.getUserList()
        })
      },
      async showEditDialog(id){
        this.editForm.id=id;
           const {data:res}=await request({url:`/users/${id}`,method:'get'})
           if(res.meta.status!==200){
             this.$message.error("查询失败！")
              return 
           }
           this.editForm.username=res.data.username;
           this.editForm.mobile=res.data.mobile;
           this.editForm.email=res.data.email;
           this.EditdialogVisible=true
         },
         async updateUser(){
           this.$refs.editFormRef.validate(async valid=>{
             if(!valid){
               return
             }
             const {data:res}=await request({url:`/users/${this.editForm.id}`,method:'put',
             data:{email: this.editForm.email,mobile:this.editForm.mobile}})
             if(res.meta.status!==200)
              {this.$message.error("更新失败！")
              return}
              this.EditdialogVisible=false
              this.getUserList()
              this.$message.success("更新用户成功！")
              

           })
         },
        async delUser(id){
          const confirmResult=await this.$confirm('此操作将永久删除该用户, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'}).catch(err=>err)
          if(confirmResult!=='confirm'){
              return  this.$message.info("已取消删除！") 
          }
           const {data:res}=await request({url:`/users/${id}`,method:'delete'})
           if(res.meta.status!=200) return this.$message.error("删除用户失败！")
           this.$message.success("删除用户成功！")
           this.getUserList()
           },
      async setRole(userInfo){
              this.userInfo=userInfo;
               // 在展示对话框之前，获取所有角色的列表
      const { data: res } =await request({url:'/roles',method:'get'})
      if (res.meta.status !== 200) {
        return this.$message.error('获取角色列表失败！')
      }

      this.rolesList = res.data

      this.dialogRoleVisible = true
           },
       // 点击按钮，分配角色
    async saveRoleInfo() {
      if (!this.selectedRoleId) {
        return this.$message.error('请选择要分配的角色！')
      }

      const { data: res } = await request({
        url:`/users/${this.userInfo.id}/role`,
        method:'put',
        data:{
          rid: this.selectedRoleId
        }}
      )

      if (res.meta.status !== 200) {
        return this.$message.error('更新角色失败！')
      }

      this.$message.success('更新角色成功！')
      this.getUserList()
      this.dialogRoleVisible = false
    },
    // 监听分配角色对话框的关闭事件
    setRoleDialogClosed() {
      this.selectedRoleId = ''
      this.userInfo = {}
    }
           
}}
</script>

<style lang="less" scoped>
.el-breadcrumb{
    font-size: 22px;
    margin-bottom: 25px;}
.el-table{
    margin-top: 20px;
}
</style>

